<template>
  <!-- <h1>goodsList.vue组件</h1> -->
  <div>
    <div class="goodsList">
         <router-link class="item" v-for="item in goodsList" :key="item.id" :to="'/index/goodsInfo/'+item.id">
             <img :src="item.img_url" alt="">
                <p class="title">{{ item.title }}</p>
                <div class="info">
                    <p>
                        <span class="newPrice">&yen;{{ item.sell_price }}</span>
                        <span class="oldPrice">&yen;{{ item.market_price }}</span>
                    </p>
                    <p class="cell"><span>热卖中</span><span>剩件{{ item.stock_quantity }}</span></p>
                </div>
         </router-link>
         <mt-button type="danger" size="large"  @click="getMore">加载更多</mt-button>
           
    </div>
  </div>
    

</template>


<script>
export default {
    data(){
        return{
            pageIndex:1,
            goodsList:[]
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
        //获取商品列表
        async getGoodsList(){
        const { data }=await this.$http.get('/api/getgoods?pageindex='+this.pageIndex)
        // console.log(data.message)
            if(data.status===0){
                this.goodsList=this.goodsList.concat(data.message)
            }
        },
        //获取更多
        getMore(){
            this.pageIndex++;
            this.getGoodsList()
        }
    }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 4px 0;
}
.goodsList {
  display: flex;
  flex-wrap: wrap;
  padding: 3px;
  justify-content: space-between;
  padding: 8px;
}
.item {
  width: 49%;
  border: 1px solid #ccc;
  margin-bottom: 8px;
  padding: 2px;
  img {
    width: 100%;
  }
  .title {
    font-weight: 700;
    color: #000;
    height:55px;
    line-height:18px;
  }
  .info {
    background-color: #eee;
    // align-items:space-around
    .newPrice {
      color: red;
      font-weight: 700;
      font-size: 16px;
      margin-right: 15px;
    }
    .oldPrice {
      text-decoration: line-through;
    }
  }
  .cell {
    display: flex;
    justify-content: space-between;
  }
}
</style>
